<template>
    <div class="proinfo-root" ref="root" id="info">
        <router-link class="home" to="/hunter">
            <span class="fa fa-home"></span>
        </router-link>

        <Swiper 
            :list="proInfo.lunbo" 
            height="191px"
            dots-position="center"
            auto
            loop
        >
        </Swiper>
        <div class="title">
            <h1>{{proInfo.title}}</h1>
            <div class="date-price">
                <div class="date-box">
                    <img src="static/img/date.png">
                    <group class="cal">
                        <calendar title="体验日期：" v-model="dingdanInfo.selectDate"  @on-change="calChange" disable-past></calendar>
                    </group>
                     <!--<span class="fa fa-chevron-right" style="font-size:13px;color:#dde"></span>-->
                </div>
                <div>
                    <span class="qian">￥</span>
                    <span class="qian-range">{{proInfo.price.range}}</span>
                </div>
            </div>
        </div>
        <div class="people">
            <div>
                <span style="color:#aaa;font-size:14px">可能结识的人</span>
                <span class="p-num">61</span>
            </div>
            <div>
                <img src="static/img/js1.jpg">
                <img src="static/img/js2.jpg">
                <img src="static/img/js3.jpg">
                <img src="static/img/js4.jpg">
                <span>· · ·</span>
            </div>
        </div>
        
        <div class="msg">
            <div v-for="m in proInfo.msg">
                <span class="fa fa-caret-right"></span>
                <p class="msg-text">{{m}}</p>
            </div>
        </div>

        <div class="proadd">
            <router-link 
                :to="{path:'/hunter/map',query:{wei:proInfo.place.wei,jing:proInfo.place.jing}}">
                <div class="mask"></div>
                <p class="addmap">
                    {{proInfo.place.title}}...&emsp;
                    <span  
                        class="fa fa-angle-right"
                        style="color:#ccc"
                    ></span>
                </p>
            </router-link>
        </div>

        <div class="user">
            <img :src="proInfo.avatar">
            <h2>chloe肉</h2>
            <span>联系猎人</span>
        </div>

        <div class="kind-list" id="icon" style="padding-top:20px">
            <span 
                class="fa fa-camera" 
                :class="{cyan:isActive==1}" @touchstart="changeColor(1)"
            ></span>
            <span 
                class="fa fa-podcast" 
                :class="{cyan:isActive==2}" @touchstart="changeColor(2)"
            ></span>
            <span 
                class="fa fa-star" 
                :class="{cyan:isActive==3}" @touchstart="changeColor(3)"
            ></span>
        </div>
        <div class="kind-list" id="list" style="padding-bottom:10px">
            <p 
                :class="{cyan:isActive==1}" @touchstart="changeColor(1)"
                style="padding:5px"
            >活动详情</p>
            <p 
                :class="{cyan:isActive==2}" @touchstart="changeColor(2)"
                style="padding:5px"
            >预订须知</p>
            <p 
                :class="{cyan:isActive==3}" @touchstart="changeColor(3)"
                style="padding:5px"
            >玩家评价</p>
        </div>

        <div :class="{isadd:isAdd}">
            <InfoActive v-show="isActive==1"></InfoActive>
            <InfoOrder v-show="isActive==2"></InfoOrder>
            <InfoPlayer v-show="isActive==3"></InfoPlayer>
        </div>

        <div class="footer">
            <p>
                <span>
                    <router-link to="/hunter/price" class="price-link">
                        <span class="qian">￥</span>
                        <span class="qian-range">{{proInfo.price.range}}</span>
                        <span class="fa fa-sort-desc sort"></span>
                    </router-link>
                </span>
                <router-link 
                    class="yue" 
                    :to="{path:'/hunter/dingdan',query:{is:0}}"
                >立即约TA</router-link>
            </p>
        </div>

    </div>
    
</template>

<script>
    import {
        Swiper,
        Calendar
    } from 'vux'
    import {
        mapState
    } from 'vuex'
    import InfoActive from '../../components/InfoActive.vue'
    import InfoOrder from '../../components/InfoOrder.vue'
    import InfoPlayer from '../../components/InfoPlayer.vue'
    export default {
        components: {
            Swiper,
            Calendar,
            InfoActive,
            InfoOrder,
            InfoPlayer
        },
        data: function() {
            return {
                isActive: 1,
                isAdd:false,
            }
        },
        computed: {
            ...mapState([
                "proInfo",
                "dingdanInfo"
            ])
        },
        mounted: function() {
            setTimeout(()=> {
                var list = document.getElementById("list");
                var icon = document.getElementById("icon");
                document.getElementById("info").onscroll = (e) => {
                    if (e.target.scrollTop > 890) {
                        list.classList.add("fix");
                        icon.classList.add("none");
                        this.isAdd =true;
                    } else {
                        list.classList.remove("fix");
                        icon.classList.remove("none");
                        this.isAdd =false;
                    }
                }
            }, 600);
            var params = {
                pro_id: this.$route.query._id
            };
            this.$store.dispatch("requestProInfo", params)
                .then(res => {
                    this.$store.commit("setProInfo", res.data.data);
                    this.$store.commit("setIsLoading", false);
                });
        },
        methods: {
            changeColor: function(n) {
                this.isAdd =true;
                var info = document.getElementById("info");
                var list = document.getElementById("list");
                var icon = document.getElementById("icon");
                icon.classList.add("none");
                list.classList.add("fix");
                info.scrollTop = 892;
                if (n == 1) {
                    this.isActive = 1;
                }
                if (n == 2) {
                    this.isActive = 2;
                }
                if (n == 3) {
                    this.isActive = 3;
                }
            },
            calChange:function(){
                this.$store.commit("setdingdanInfo",this.dingdanInfo);
            }
        }
    }
</script>

<style scoped>
    .proinfo-root {
        width: 100vw;
        height: calc(100vh - 55px);
        overflow: scroll;
        background-color: #fff;
    }
    
    .title {
        margin-top: 22px;
        margin-left: 3vw;
        line-height: 16px;
        font-weight: 400;
        position: relative;
        min-height: 62px;
        color: #5c5c5c;
        width: 91.5vw;
        min-width: 280px;
    }
    
    .title h1 {
        font-size: 18px;
        font-weight: 600;
    }
    
    .date-price {
        margin-top: 24px;
        width: 100%;
        height: 65px;
        display: flex;
        justify-content: space-between;
    }
    
    .date-price>div:nth-of-type(2) {
        color: #f47517;
    }
    
    .date-box {
        margin-top: 5px;
    }
    
    .date-box img {
        width: 14px;
        height: 14px;
    }
    
    .people {
        margin-top: -10px;
        margin-left: 3vw;
        display: flex;
        justify-content: space-between;
        min-width: 280px;
    }
    
    .people>div:nth-of-type(2) img {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        margin-left: -4vw;
        border: 2px solid #fff;
    }
    
    .people>div:nth-of-type(2) span {
        display: inline-block;
        width: 34px;
        height: 34px;
        line-height: 30px;
        border-radius: 50%;
        background-color: #e7e7e7;
        color: #fff;
        position: relative;
        left: -3.4vw;
        top: -2.8vw;
        text-align: center;
        border: 2px solid #fff;
    }
    
    .p-num {
        line-height: 18px;
        padding: 1px 7px;
        font-size: 12px;
        border-radius: 18px;
        background-color: #e7e7e7;
        color: #fff;
    }
    
    .msg {
        margin-top: 24px;
        margin-left: 3vw;
    }
    
    .msg div {
        display: flex;
        margin: 2px 0;
    }
    
    .msg p {
        margin: 0;
        margin-left: 8px;
        display: inline-block;
        font-size: 14px;
        color: #5c5c5c;
        line-height: 18px;
    }
    
    .msg span {
        color: #ddd;
        font-size: 14px;
    }
    
    .msg-text {
        width: 90vw;
    }
    
    .proadd {
        margin-top: 18px;
        width: 100%;
        height: 0;
        padding-bottom: 40%;
        background-image: url("/static/img/map.png");
        background-size: cover;
        background-position: center;
        text-align: center;
        position: relative;
    }
    
    .mask {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(rgba(255, 255, 255, 0), #fff);
    }
    
    .addmap {
        width: 80%;
        margin-top: 39px;
        font-size: 14px;
        display: inline-block;
        padding: 0 15px 0 10px;
        background: rgba(255, 255, 255, .8);
        box-shadow: 0 4px 14px 0 rgba(0, 0, 0, .15);
        border-radius: 8px;
        position: relative;
        height: 36px;
        z-index: 2;
        line-height: 36px;
    }
    
    .user {
        width: 300px;
        margin: 0 auto;
        text-align: center;
        margin-top: 30px;
    }
    
    .user img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
    }
    
    .user h2 {
        margin: 6px 10px 0;
        font-size: 16px;
        color: #5c5c5c;
        font-weight: 200;
    }
    
    .user span {
        display: inline-block;
        font-size: 14px;
        border: 1px solid #f36700;
        border-radius: 20px;
        color: #f36700;
        padding: 8px 18px;
        margin-top: 16px;
        position: relative;
    }
    
    .kind-list {
        display: flex;
        justify-content: space-around;
        background-color: #fff;
        color: #5c5c5c;
    }
    
    .kind-list span {
        display: inline-block;
        height: 25px;
        font-size: 25px;
    }
    
    .kind-list p {
        font-size: 15px;
        margin-top: 5px;
        margin-bottom: 8px;
    }
    
    .cyan {
        color: #4abdcc !important;
    }
    
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100vw;
        height: 55px;
        background-color: #f47517;
        font-weight: 400;
        color: #fff;
        text-align: center;
    }
    
    .footer p {
        width: 295px;
        margin: 11px auto;
        text-align: left;
        line-height: 32px;
        display: flex;
        justify-content: space-between;
    }
    
    .qian {
        font-size: 14px;
        position: relative;
        top: -2.5vw;
        left: 1.5vw;
    }
    
    .qian-range {
        font-size: 20px;
        font-weight: 550;
    }
    
    .sort {
        position: relative;
        top: -1vw;
        left: 2vw;
    }
    
    .yue {
        display: inline-block;
        color: #fff;
        font-size: 15px;
        border-radius: 40px;
        border: 1px solid #fff;
        height: 34px;
        width: 122px;
        text-align: center;
    }
    
    .price-link {
        color: #fff;
    }
    
    .fix {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        padding-top: 4px;
        z-index: 10;
        padding-bottom: 0 !important;
    }
    
    .none {
        display: none;
    }
    .isadd{
        padding-top:79px
    }
    .home{
        display: block;
        position: fixed;
        width: 44px;
        height: 44px;
        right: 30px;
        bottom: 95px;
        background: rgba(74, 74, 74, .9);
        border-radius: 50%;
        text-align: center;
        z-index: 10;
        box-shadow: rgba(92, 92, 92, .5) 0 4px 6px;
        line-height: 40px;
        color: #eee;
        font-size: 25px;
    }
    .cal{
        position: relative;
        top: -42px;
        left: 8px;
    }
    /*.weui-cell{
        padding-left: 3px !important;
    }*/
</style>